import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import PropTypes from 'prop-types';
import {getRealSize, Touchable} from '../utils';
import ThemeStyles from '../styles';

export default class RadioGroup extends React.Component {
  static propsTypes = {
    items: PropTypes.func.isRequired,
    value: PropTypes.func,
  };
  static defaultProps = {
    items: [],
  };

  onSelected = value => {
    this.props.onChange(value);
  };

  render() {
    const {items, value} = this.props;
    return (
      <View style={Styles.container}>
        {items.map(item => (
          <RadioBlock
            selected={item.value === value}
            label={item.label}
            key={item.label}
            onPress={() => this.onSelected(item.value)}
          />
        ))}
      </View>
    );
  }
}

const RadioBlock = props => {
  return (
    <Touchable onPress={() => props.onPress()}>
      <View style={Styles.block}>
        <Icon
          name={props.selected ? 'check-circle-o' : 'circle-thin'}
          size={18}
          color={props.selected ? ThemeStyles.Color.primary.color : '#C7C7CC'}
        />
        <Text
          style={[
            Styles.radioLabel,
            props.selected
              ? Styles.selected
              : {color: ThemeStyles.Color.text.normal.color},
          ]}>
          {props.label}
        </Text>
      </View>
    </Touchable>
  );
};

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  block: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: getRealSize(8),
    paddingVertical: getRealSize(8),
    paddingHorizontal: getRealSize(12),
  },
  radioLabel: {
    marginLeft: getRealSize(4),
  },
  selected: {
    color: ThemeStyles.Color.primary.color,
  },
});
